<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="always">
      <div>
        <i class="el-icon-search"></i>
        <span>请输入不动产查询信息</span>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="身份证号" prop="sfzh">
            <el-input v-model="listQuery.sfzh" placeholder="请输入身份证号" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
          
          <el-form-item label="不动产权证号" prop="bdcqzh">
            <el-input v-model="listQuery.bdcqzh" placeholder="请输入不动产权证号" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button style="float: right" type="warning" size="small" >查询不动产信息</el-button>
          </el-form-item>

        </el-form>
      </div>
    </el-card>

  <div style="margin-top: 15px">
    <el-card class="operate-container" shadow="never">
      <el-row :gutter="18">
        <el-form ref="dybdcxxform" :model="dybdcxxform" :rules="rules" size="medium" label-width="160px">
          <!-- 抵押不动产信息 -->
          <div style="margin-top: 15px">
            <el-card class="operate-container" shadow="never">
              <el-col :span="24">
                <el-row :gutter="18">
                  <el-col :span="12">
                    <el-form-item label="原登记业务号" prop="yywbh">
                      <el-input v-model="dybdcxxform.yywbh" placeholder="请输入原登记业务号" clearable
                        :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="坐落" prop="zl">
                      <el-input v-model="dybdcxxform.zl" placeholder="请输入坐落" clearable :style="{width: '100%'}">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="不动产单元号" prop="bdcdyh">
                      <el-input v-model="dybdcxxform.bdcdyh" placeholder="请输入不动产单元号" clearable
                        :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="房屋编码" prop="fwbm">
                      <el-input v-model="dybdcxxform.fwbm" placeholder="请输入房屋编码" clearable :style="{width: '100%'}">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-card>
          </div>

          <div style="margin-top: 15px">
            <el-card class="operate-container" shadow="never">
              <!-- 抵押人信息 -->
              <el-col :span="24">
                <el-row :gutter="18">
                  <el-col :span="12">
                    <el-form-item label="代理人名称" prop="dlrmc">
                      <el-input v-model="dybdcxxform.dyrxx.dlrmc" placeholder="请输入代理人名称" clearable
                        :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="代理人电话" prop="dlrdh">
                      <el-input v-model="dybdcxxform.dyrxx.dlrdh" placeholder="请输入代理人电话" clearable
                        :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="代理人证件号码" prop="dlrzjhm">
                      <el-input v-model="dybdcxxform.dyrxx.dlrzjhm" placeholder="请输入代理人证件号码" clearable
                        :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="权利人名称" prop="qlrmc">
                      <el-input v-model="dybdcxxform.dyrxx.qlrmc" placeholder="请输入权利人名称" clearable
                        :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="证件种类" prop="zjlx">
                      <el-select v-model="dybdcxxform.dyrxx.zjlx" placeholder="请选择证件种类" clearable
                        :style="{width: '100%'}">
                        <el-option v-for="(item, index) in zjlxOptions" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="证件号码" prop="zjhm">
                      <el-input v-model="dybdcxxform.dyrxx.zjhm" placeholder="请输入证件号码" clearable :style="{width: '100%'}">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别" prop="xb">
                      <el-select v-model="dybdcxxform.dyrxx.xb" placeholder="请选择性别" clearable :style="{width: '100%'}">
                        <el-option v-for="(item, index) in xbOptions" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="单位性质" prop="dwxz">
                      <el-select v-model="dybdcxxform.dyrxx.dwxz" placeholder="请选择单位性质" clearable
                        :style="{width: '100%'}">
                        <el-option v-for="(item, index) in dwxzOptions" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="国籍" prop="gj">
                      <el-select v-model="dybdcxxform.dyrxx.gj" placeholder="请选择国籍" clearable :style="{width: '100%'}">
                        <el-option v-for="(item, index) in gjOptions" :key="index" :label="item.label"
                          :value="item.value" :disabled="item.disabled"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="共有情况" prop="gyqk">
                      <el-input v-model="dybdcxxform.dyrxx.gyqk" placeholder="请选择共有情况" clearable :style="{width: '100%'}">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="权利比例" prop="qlbl">
                      <el-input v-model="dybdcxxform.dyrxx.qlbl" placeholder="请输入权利比例" clearable :style="{width: '100%'}">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>         
            </el-card>
          </div>
        </el-form>
      </el-row>    
    </el-card>
  </div>
    
    
  </div>
</template>
<script>
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  sfzh: '',    // 身份证号（查询条件）
  bdcqzh: '',  // 不动产权证号（查询条件）
};

export default {
  components: {},
  props: [],
  data() {
    return {
      // 查询条件
      listQuery: Object.assign({}, defaultListQuery),

      /** 抵押不动产信息 */
      dybdcxxform: {


        yywbh: '',
        zl: '',
        bdcdyh: '',
        fwbm: '',
        
        /** 抵押人信息 */
        dyrxx: [{
          dlrmc: '',
          dlrdh: '',
          dlrzjhm: '',
          qlrmc: '',
          zjlx: '',
          zjhm: '',
          xb: '',
          dwxz: '',
          gj: '',
          gyqk: '',
          qlbl: '',
        }],

      },

     
      
      rules: {
        sfzh: [{
          required: true,
          message: '请输入身份证号',
          trigger: 'blur'
        }],
        bdcqzh: [{
          required: true,
          message: '请输入不动产权证号',
          trigger: 'blur'
        }],
        yywbh: [{
          required: true,
          message: '请输入原登记业务号',
          trigger: 'blur'
        }],
        zl: [{
          required: true,
          message: '请输入坐落',
          trigger: 'blur'
        }],
        bdcdyh: [{
          required: true,
          message: '请输入不动产单元号',
          trigger: 'blur'
        }],
        fwbm: [{
          required: true,
          message: '请输入房屋编码',
          trigger: 'blur'
        }],
        dlrmc: [{
          required: true,
          message: '请输入代理人名称',
          trigger: 'blur'
        }],
        dlrdh: [{
          required: true,
          message: '请输入代理人电话',
          trigger: 'blur'
        }],
        dlrzjhm: [{
          required: true,
          message: '请输入代理人证件号码',
          trigger: 'blur'
        }],
        qlrmc: [{
          required: true,
          message: '请输入权利人名称',
          trigger: 'blur'
        }],
        zjlx: [{
          required: true,
          message: '请选择证件种类',
          trigger: 'change'
        }],
        zjhm: [{
          required: true,
          message: '请输入证件号码',
          trigger: 'blur'
        }],
        xb: [{
          required: true,
          message: '请选择性别',
          trigger: 'change'
        }],
        dwxz: [{
          required: true,
          message: '请选择单位性质',
          trigger: 'change'
        }],
        gj: [{
          required: true,
          message: '请选择国籍',
          trigger: 'change'
        }],
        gyqk: [{
          required: true,
          message: '请选择共有情况',
          trigger: 'blur'
        }],
        qlbl: [{
          required: true,
          message: '请输入权利比例',
          trigger: 'blur'
        }],
      },
      zjlxOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      xbOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      dwxzOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      gjOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}

</script>
<style>
</style>
